<template component>
  <style>
    .box {
      width: 20px;
      height: 20px;
      display: inline-block;
      margin-right: 5px;
      margin-bottom: 5px;
      background-color: red;
    }
  </style>
  显示： {{show}} len: {{arr.length}} time: {{time}}ms
  <br/>
  <button on:click="onToggle">显示/隐藏</button>
  <hr/>
  <div id="cardBox" style="width: 100%;overflow: auto;max-height: 90vh;">
    <x-if :value="show">
      <x-fill :value="arr">
        <span class="box"></span>
      </x-fill>
    </x-if>
  </div>
  <script>
    let myCompDom;
    setTimeout(() => {
      myCompDom = $('my-comp').ele.shadowRoot;
    }, 1000)

    export default {
      tag: "my-comp",
      data: {
        show: true,
        color: 'red',
        time: 0,
        arr: Array(50000).fill(0),
      },
      proto: {
        onToggle() {
          this.show = !this.show;
          if (!this.show) return ;

          let t = performance.now();
          const cardBoxDom = myCompDom.querySelector('#cardBox')
          if (!cardBoxDom) return ;
          const len = this.arr.length;
          let timer;
          timer = setInterval(() => {
            if (cardBoxDom.children.length == len) {
              clearInterval(timer);
              this.time = Math.floor(performance.now() - t);
            }
          }, 50);
        },
      },
    };
  </script>
</template>
